<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>初识Vue</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 初始Vue:
                1:想让Vue工作, 就必须创建一个Vue实例, 且要传入一个配置对象;
                2:root容器里的代码依然复合html规范, 只不过混入了一些特殊的Vue语法
                3：root容器里的代码被称为【Vue模板】
                4：Vue实例和容器是一一对应的
                5：真实开发中只有一个Vue实例, 并且会配合着组件一起使用
                6：{{xxx}}中的xxx要写js表达式, 且xxx可以自动读取到data中的所有属性
                7：一旦data中的数据发生改变, 那么模板(页面)中用到该数据的地方会自动更新

                注意区分： js表达式 和 js代码(语句)
                    1：表达式： 一个表达式会生成一个值, 可以放在任何一个需要值的地方：
                        1).
                        2). a+b
                        3). demo(1)
                        4). x === y ? 'a' : 'b'
                    2.js代码(语句)
                        1).if(){}
                        2).for(){}
        -->
        <!-- 准备好一个容器 -->
        <dev id="root">
            <h1>hello， {{name.toUpperCase()}}</h1>
            <h1>我得年龄是: {{age}}</h1>
        </dev>
        <dev id="root2">
            <h1>hello， {{name}}</h1>
            <h1>我得年龄是: {{age}}</h1>
        </dev>
        
        <script type="text/javascript">
            Vue.config.productionTip = false;// 阻止 vue 在启动时生成生产提示。

            // 创建 Vue实例
            new Vue({
                el:'#root' // el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
                ,data: { // data 用于存储数据, 数据供el所指定的容器去使用，值我们暂时先写成一个对象
                    name: 'word'
                    ,age: 18
                }
            });
            new Vue({
                el:'#root2' // el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
                ,data: { // data 用于存储数据, 数据供el所指定的容器去使用，值我们暂时先写成一个对象
                    name: 'word，two'
                    ,age: 20
                }
            });

        </script>
    </body>
</html>